<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Dom操作</title>
	</head>
	<body>
		<div id="div1">这是第一个div</div>
		<div id="div2">这是第二个div</div>

		<p class="class1"><span>秋天</span></p>
		<p class="class1">冬天</p>

		<img src="img/02.jpeg" id="img1" width="100" />
		<input type="button" value="修改图片地址" onclick="changeimg()" />
		<input type="button" value="修改css样式" onclick="changedivcss()" />
		<input type="button" value="创建dom对象" onclick="createImg()" />
		<input type="button" value="删除dom对象" onclick="deleteDom()" />

		<div id="div3">
			<span id="span1">原始内容</span>
		</div>
		
		<script type="text/javascript">
			//#1 使用getElementById方法获取，一个dom
//			var div1=document.getElementById("div1");
//			alert(div1.innerHTML);
			//#2 getElementsByTagName
			//var divs=document.getElementsByTagName("div");
			//alert(divs);
//			for(var i=0;i<divs.length;i++){
//				alert(divs[i].innerHTML);
//			}
			//3 getElementsByClassName();
			
//			var ps=document.getElementsByClassName("class1");
//			for(var i=0;i<ps.length;i++){
//				alert(ps[i].innerText);
//			}
			
			//修改内容
			//document.getElementById("div1").innerHTML="<h1>北京的秋天真冷</h1>";
			document.getElementById("div1").innerText="<h1>北京的秋天真冷</h1>";
			
			//#修改属性
			
			function changeimg(){
				//简单
//				document.getElementById("img1").src="img/003.jpg";
				//使用方法(功能强大)
				document.getElementById("img1").setAttribute("src","img/03.jpg");
			}
			//#修改样式
			function changedivcss(){
				var div1=document.getElementById("div1");
				div1.style.width="100px";
				div1.style.height="200px";
				div1.style.backgroundColor="skyblue";
				div1.style.fontSize="30px";
				
			}
			//#创建元素
			
			function createImg(){
				//1创建html元素 （在内存中保留）
				var myimg=document.createElement("img");
				myimg.src="img/05.jpg";
				//2添加网页中
				//document.getElementById("div3").appendChild(myimg);
				var span1=document.getElementById("span1");
				document.getElementById("div3").insertBefore(myimg,span1);
				
			}
			function deleteDom(){
				//删除1 
				//document.getElementById("div3").remove();
				//删除2
				var span1=document.getElementById("span1");
				document.getElementById("div3").removeChild(span1);
			}
			
			
		</script>
	</body>
	
	
</html>
